<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">发现星球</view>
      <view class="head_right" @click="toCreate"> 创建星球 </view>
    </view>
    <view class="box" :style="{ height: scrollHieght + 'px' }">
      <view class="box_left">
        <view
          class="left_item"
          v-for="(item, index) in list"
          :class="index == currentIndex ? 'left_action' : ''"
          @click="Change(item, index)"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="box_right">
        <view class="title">
          {{ list[currentIndex].name }}
        </view>
        <view class="box_content">
          <view
            class="box_item"
            v-for="(item, index) in list1"
            @click="toDetail(item)"
          >
            <view class="box_left">
              <image :src="item.img_avatar_url" mode=""></image>
            </view>
            <view class="box_right">
              <view class="title1">
                {{ item.name }}
              </view>
              <view class="content_text"> {{ item.total_user }}成员 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import { xingheList } from "@/common/api/start.js";

export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      scrollHieght:0,
      currentIndex: 0,
      list: [
        {
          name: "新星球",
        },
        {
          name: "心愿",
        },
        {
          name: "贡献",
        },
        {
          name: "善师",
        },
        {
          name: "人物",
        },
        {
          name: "图书",
        },
        {
          name: "活动",
        },
        {
          name: "慈善",
        },
        {
          name: "互助",
        },
        {
          name: "义工",
        },
        {
          name: "学习",
        },
      ],
      list1: [],
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    const windowHeihgt = statusBarHeight.windowHeight;
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          this.scrollHieght = windowHeihgt - data.height - this.statusBarHeight;
        })
        .exec();
    });
  },
  onLoad() {
    this.getFenLei();
  },
  methods: {
    getFenLei() {
      this.$http
        .xingheGettype({})
        .then((res) => {
          console.log(res.data.list, "星球分类");
          this.list = res.data.list;
          this.selectId = res.data.list[0].id;
          this.getList();
        })
        .catch((error) => {
          console.log(error, "错误");
          uni.$u.toast(error);
        });
    },
    getList() {
      xingheList({
        type: this.selectId,
      }).then((res) => {
        console.log("resssss", res);
        this.list1 = res.data.list.data;
      });
    },
    Change(item, index) {
      this.currentIndex = index;
      this.selectId = item.id;
      this.getList();
    },
    toCreate() {
      uni.navigateTo({
        url: "/pages/distinguish/createStart",
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pages/distinguish/discussionGroup?id=" + item.id,
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  position: fixed;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.box {
  width: 100%;
//   height: 100%;
  display: flex;

  .box_left {
    width: 192rpx;
    height: 100%;
    background: rgb(247, 248, 250);
    overflow-y: auto;

    .left_item {
      padding: 32rpx 0 32rpx 32rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #444444;
      box-sizing: border-box;
    }

    .left_action {
      color: #55b877;
      background: #fff;
    }
  }

  .box_right {
    flex: 1;
    overflow-y: auto;
    .title {
      width: 100%;
      padding: 32rpx 0 24rpx 34rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #444444;
    }

    .box_content {
      width: 100%;
      padding: 0 34rpx;
      box-sizing: border-box;

      .box_item {
        width: 100%;
        display: flex;

        margin-bottom: 40rpx;

        // margin: 40rpx 0 25rpx;
        .box_left {
          width: 124rpx;
          height: 124rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .box_right {
          flex: 1;
          height: 100%;
          padding-left: 24rpx;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;

          // padding-bottom: 24rpx;
          .title1 {
            width: 100%;
            font-size: 32rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #444444;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
          }

          .content_text {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #888888;
            margin-top: 34rpx;
          }
        }
      }
    }
  }
}
</style>